<template>
	<view class="">
		<div style="margin-top: 50px;">
			<uni-card padding="0" spacing="0">
				<form class="form">
					<p class="form-title">校园墙</p>
					<div class="input-container">
						<input type="email" placeholder="QQ邮箱或手机号" v-model="sccountNumber">
					</div>
					<div class="input-container">
						<input type="password" placeholder="密码" v-model="password">
					</div>
					<button type="submit" class="submit" @click="Login">
						登入
					</button>

					<p class="signup-link">
						没有账号?
						<span @click='goToRegister'>去注册</span>
					</p>
				</form>
			</uni-card>

<!-- 			<uni-card padding='0' spacing='0' :is-shadow=" false">
				<div style="background-color: #8E93A1; padding: 5px;">
					<p style="font-size: 10px; color: red;">
						注：由于该小程序是一位你们的软件专业的混子学长在校期间课余时间所开发，未进行刻意推广，知道的同学较少，数据较少。同学要是觉得该小程序好用 的话，就赶紧推荐给身边同学吧；
					</p>
					<p style="font-size: 10px; color: red;">
						注：后台服务由自己搭建，比较烂，bug比较多，请谅解！
					</p>
					<p style="font-size: 10px; color: red;">
						注：本人比较懒，开发较慢，有些功能未实现就上线了，请谅解！
					</p>
				</div>
			</uni-card> -->

<!-- 			<uni-card padding='0' spacing='0' :is-shadow="false">
				<div style="background-color: #8E93A1; padding: 5px;">
					<div style="text-align: center;">
						<text style="font-size: 20px; font-weight: bold; margin: 5px 0;">小程序介绍</text>
					</div>
					<p>
						<span style="font-weight: bold;">概述：</span>
						由于本人在校时期有出售过二手物品，求购二手，丢过很多的水卡，发现想要找渠道去出售二手物品、求购二手物品、找失去的东西的渠道只有小薇薇等，然而不是很自主、方便。由此开发该
						<span style="font-weight: bold; color: red; font-size: 20px;"> 校园墙 </span>小程序进行解决。
					</p>
					<p>
						<span style="font-weight: bold;">缺点：</span>由于本人开发技术较烂！该小程序的功能不多！
					</p>
					<p>
						<span style="font-weight: bold;">目的：</span>方便同学进行二手物品
						<span style="font-weight: bold; color: red;">挂出，挂失，挂失物招领，发表墙</span>。
					</p>
					<p><span style="font-weight: bold;">开发者：</span>AixXu 【中de在校学生】</p>
					<p style="font-size: 10px; color: red;">提倡书：愿广大同学绿色使用。</p>
				</div>
			</uni-card> -->
		</div>
	</view>
</template>

<script>
	import request from '../../network/request.js'

	export default {
		name: "myLogin",

		data() {
			return {
				sccountNumber: '',
				password: '',
			}
		},

		onLoad() {
			const that = this

			// 验证码正则
			uni.getStorage({
				key: "sccountNumber",
				success(res) {
					that.sccountNumber = res.data
				}
			})
		},

		methods: {
			// 登入
			Login() {
				const that = this

				if (this.sccountNumber === '' || this.password === '') {
					return uni.showToast({
						title: "账号或密码不能为空！",
						icon: 'none',
					})
				}

				request({
					url: '/api/login',
					method: 'POST',
					data: {
						sccountNumber: that.sccountNumber,
						password: that.password
					}
				}).then(data => {
					if (data.status >= 200 && data.status < 300) {
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
						// 将token缓存
						uni.setStorage({
							key: "token",
							data: data.token,
						})
						// 将账号缓存
						uni.setStorage({
							key: 'sccountNumber',
							data: this.sccountNumber,
						})
						uni.switchTab({
							url: '/pages/home/home'
						})
					} else {
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
					}
				})

				


			},


			// 去注册
			goToRegister() {
				uni.navigateTo({
					url: '../../packagesLogin/myRegister'
				})
			}
		},
	}
</script>

<style scoped>
	.form {
		background-color: #fff;
		display: block;
		padding: 1rem;
		max-width: 350px;
		border-radius: 0.5rem;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}

	.form-title {
		margin: 30px 0;
		font-size: 1.5rem;
		line-height: 1.75rem;
		font-weight: 600;
		text-align: center;
		color: #000;
	}

	.input-container {
		position: relative;
	}

	.input-container input,
	.form button {
		outline: none;
		border: 1px solid #e5e7eb;
		margin: 8px 0;
	}

	.input-container input {
		background-color: #fff;
		padding: 1rem;
		padding-right: 3rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
		/* width: 300px; */
		border-radius: 0.5rem;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	}

	.submit {
		display: block;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		background-color: #4F46E5;
		color: #ffffff;
		font-size: 0.875rem;
		line-height: 1.25rem;
		font-weight: 500;
		width: 100%;
		border-radius: 0.5rem;
		text-transform: uppercase;
	}

	.signup-link {
		color: #6B7280;
		font-size: 0.875rem;
		line-height: 1.25rem;
		text-align: center;
	}



	.signup-link span {
		color: red;
		text-decoration: underline;
	}
</style>